<template>
   <div class="link-container">
       <div style="margin-bottom:61px" @click="jump('https://www.bilibili.com/')">
           <img class="logo-img" src="~@/assets/bilibili.png" alt="">
           <div class="link-text">B站港澳台</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.lazada.com/')">
           <img class="logo-img" src="~@/assets/lazada.png" alt="">
           <div class="link-text">Lazada</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.netflix.com')">
           <img class="logo-img" src="~@/assets/Netflix.png" alt="">
           <div class="link-text">Netflix</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.pinterest.com/')">
           <img class="logo-img" src="~@/assets/Pinterest.png" alt="">
           <div class="link-text">Pinterest</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://telegram.org/')">
           <img class="logo-img" src="~@/assets/telegram.png" alt="">
           <div class="link-text">Telegram</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://twitter.com/')">
           <img class="logo-img" src="~@/assets/tuite.png" alt="">
           <div class="link-text">Twitter</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.twitch.tv/')">
           <img class="logo-img" src="~@/assets/twitch.png" alt="">
           <div class="link-text">Twitch</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.whatsapp.com/')">
           <img class="logo-img" src="~@/assets/whatsapp.png" alt="">
           <div class="link-text">Whatsapp</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.youtube.com/')">
           <img class="logo-img" src="~@/assets/you.png" alt="">
           <div class="link-text">Youtube</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://google.com')">
           <img class="logo-img" src="~@/assets/google.png" alt="">
           <div class="link-text">google</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.facebook.com/')">
           <img class="logo-img" src="~@/assets/lianshu.png" alt="">
           <div class="link-text">Facebook</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://zh.wikipedia.org/')">
           <img class="logo-img" src="~@/assets/wjbk.png" alt="">
           <div class="link-text">维基百科</div>
       </div>
       <div style="margin-bottom:61px" @click="jump('https://www.amazon.com/')">
           <img class="logo-img" src="~@/assets/ymx.png" alt="">
           <div class="link-text">亚马逊</div>
       </div>
   </div>
</template>

<script>
import {shell} from 'electron'
export default {
    name:'link-url',
    methods:{
        jump(url){
            shell.openExternal(url)
        }
    }
}
</script>

<style>
    .link-container{
        width: 100%;
        height: 100%;
        padding: 47px 55px;
        display: grid;
        grid-template-columns:repeat(5,70px);
        grid-column-gap: 83px;
    }
    .link-container .logo-img{
        width: 70px;
        height: 70px;
        margin-bottom: 13px;
    }
    .link-text{
        text-align: center;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #B7B7B7;
    }
</style>